require('normalize.css/normalize.css');
require('styles/main.scss');

import React from 'react';
import ReactDOM from 'react-dom';

let yeomanImage = require('../images/yeoman.png');
let imageDatas = require('../data/imageDatas.json');

//利用自执行函数，将图片名信息转成图片URL路径信息
imageDatas = (function genImageURL(imageDatasArr) {
    for (var i = 0; i < imageDatasArr.length; i++) {
        var singleImageData = imageDatasArr[i];

        singleImageData.imageURL = require('../images/' + singleImageData.fileName);

        imageDatasArr[i] = singleImageData;
    }

    return imageDatasArr;
})(imageDatas);
/*
	获取区间内的一个随机值
*/
function getRangeRandom(low, high) {
    return Math.ceil(Math.random() * (high - low) + low);
}
/*取 0-30之间的正负值*/
function get30DegRandom() {
    return Math.random() > 0.5 ? Math.ceil(Math.random() * 30) : -Math.ceil(Math.random() * 30);
}

let ImgFigure = React.createClass({
    /*imgFigure的点击处理函数*/
    handleClick: function(e) {
        console.log(this.props.arrange.isCenter)

        if (this.props.arrange.isCenter) {
            this.props.inverse();
        } else {
            this.props.center();
        }
        e.stopPropagation();
        e.preventDefault();
    },
    render() {
        let styleObj = {};
        //如果props属性中制定了这张图片的位置，则使用
        if (this.props.arrange.pos) {
            styleObj = this.props.arrange.pos;
        }
        if (this.props.arrange.rotate) {
            ["Moz", "Ms", "Webkit"].forEach(function(value) {
                styleObj[value + "Transform"] = "rotate(" + this.props.arrange.rotate + "deg)";
            }.bind(this))
        }
        if (this.props.arrange.isCenter) {
            styleObj.zIndex = 11;
        }

        var imgFigureClassName = "img-figure";
        imgFigureClassName += this.props.arrange.isInverse ? " is-inverse" : "";

        return ( < figure className = { imgFigureClassName }
            style = { styleObj }
            onClick = { this.handleClick } >
            < img src = { this.props.data.imageURL }
            alt = { this.props.data.title }
            />  < figcaption className = "img-title" > < h2 > { this.props.data.title } < /h2 >
            < div className = "img-back"
            onClick = { this.handleClick } >
            < p > { this.props.data.desc } < /p> < /div > < /figcaption > < /figure >
        )
    }
});
/*控制点*/
var NavControll = React.createClass({
    handleClick: function(e) {
        if (this.props.arrange.isCenter) {
            this.props.inverse();
        } else {
            this.props.center();
        }
        e.stopPropagation();
        e.preventDefault();
    },
    render() {

        let controllerUnitsClassName = 'controller-unit';
        controllerUnitsClassName += (this.props.arrange.isCenter) ? ' is-center' : '';
        controllerUnitsClassName += (this.props.arrange.isInverse) ? ' is-inverse' : '';
        return ( < li className = { controllerUnitsClassName }
            onClick = { this.handleClick } ></li >
        )
    }
});



let AppComponent = React.createClass({
            Constant: {
                centerPos: {
                    left: 0,
                    right: 0
                },
                hPosRange: { //水平方向取值范围
                    leftSecX: [0, 0],
                    rightSecX: [0, 0],
                    y: [0, 0]
                },
                vPosRange: { //垂直方向的取值
                    x: [0, 0],
                    topY: [0, 0]
                }
            },
            /*翻转图片
				@param index 输入当前别执行的inverse操作的图片对应的图片信息数组的index值
				@return{function} 这是个必报，期内return一个真正待被执行的函数
            */

            inverse: function(index) {
                return function() {
                    var imgsArrangeArr = this.state.imgsArrangeArr;
                    imgsArrangeArr[index].isInverse = !imgsArrangeArr[index].isInverse;
                    this.setState({
                        imgsArrangeArr: imgsArrangeArr
                    })
                }.bind(this);
            },
          rearrange (centerIndex) {
    let imgsArrangeArr = this.state.imgsArrangeArr,
        Constant = this.Constant,
/* * 图片的取值范围
   */
        // 中间图片的位置
        centerPos = Constant.centerPos,

        // 左右两边图片的取值范围
        hPosRange = Constant.hPosRange,
        hPosRangeLeftSecX = hPosRange.leftSecX,
        hPosRangeRightSecX = hPosRange.rightSecX,
        hPosRangeY = hPosRange.y,

        // 上边图片的取值范围
        vPosRange = Constant.vPosRange,
        vPosRangeX = vPosRange.x,
        vPosRangeTopY = vPosRange.topY;
/* * endbuild
   */

/* * 中间图片的布局
 */
    // 取出要布局中央的图片的位置信息
    let imgsArrangeCenterArr = [];
    imgsArrangeCenterArr = imgsArrangeArr.splice(centerIndex, 1);  // 拿到中间图片后把中间图片的状态信息从数组里删除

    // 居中centerIndex的图片的位置，不需要旋转
    imgsArrangeCenterArr[0] = {
      pos: centerPos,
      rotate: 0,
      isCenter: true
    }
/* * endbuild
 */

/* * 上边图片的布局
   */
    let imgsArrangeTopArr = [];  // 存储放在上边区域的图片状态信息
    let topImgNum = Math.floor( Math.random() *2 ); //取0张或一张

    // 取出要布局上侧图片的位置信息
    let topImgSpliceIndex = 0; //从哪个index开始取图片
    topImgSpliceIndex = Math.floor( Math.random() * (imgsArrangeArr.length - topImgNum));
    imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum);

    // 布局位于上侧的图片的位置
    imgsArrangeTopArr.forEach(function(value,index){
      imgsArrangeTopArr[index] = {
        pos: {
          left: getRangeRandom(vPosRangeX[0], vPosRangeX[1]), // 调用上面的在区间内取随机数的函数
          top: getRangeRandom(vPosRangeTopY[0], vPosRangeTopY[1])
        },
        rotate: get30DegRandom(),
        isCenter: false
      }
    })
 /* * endbuild
   */

/* * 左右图片的布局
   */
    // 上面已经剔除了中间、上面图片的位置信息，所以这里不用做剔除了
    for(let i = 0, j = imgsArrangeArr.length, k = j / 2; i < j; i++){

      // 前半部分布局左边，右半部分布局右边
      let hPosRangeLOrRX = null;
      if(i < k){
        hPosRangeLOrRX = hPosRangeLeftSecX;
      }else{
        hPosRangeLOrRX = hPosRangeRightSecX;
      }

      imgsArrangeArr[i] = {
        pos: {
          left: getRangeRandom(hPosRangeLOrRX[0], hPosRangeLOrRX[1]),
          top: getRangeRandom(hPosRangeY[0], hPosRangeY[1])
        },
        rotate: get30DegRandom(),
        isCenter: false
      }
    }
/* * endbuild
   */

/* * 图片的重新渲染
   */
    // 把取出来的上边的图片位置信息放回去
    if(imgsArrangeTopArr && imgsArrangeTopArr[0]){
      imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangeTopArr[0]);
    }
    // 把取出来的中央的图片位置信息放回去
    imgsArrangeArr.splice(centerIndex, 0, imgsArrangeCenterArr[0]);

    // 触发component的重新渲染
    this.setState({
      imgsArrangeArr: imgsArrangeArr
    })
/* * endbuild
   */

  },
            /*
				利用rearrange函数，居中对应的index图片
				@param index    
				@return {function}
			
            */
            center: function(index) {
                return function() {
                    this.rearrange(index);
                }.bind(this)
            }

            ,
            getInitialState: function() {
                return {
                    imgsArrangeArr: [
                        // pos:{
                        // 	left:0,
                        // 	top:0
                        // },
                        // rotate：0  //图片旋转角度
                        //isCenter:false
                    ]
                }
            },
            componentDidMount: function() { //组件加载后，为每张图片计算其位置的范围
                //先拿到舞台的大小
                let stageDOM = ReactDOM.findDOMNode(this.refs.stage);

                
                let stageW = stageDOM.scrollWidth,
                    stageH = stageDOM.scrollHeight,
                    halfStageW = Math.ceil(stageW / 2),
                    halfStageH = Math.ceil(stageH / 2);
                //拿到一个imageFigure大小
                let imgFigureDOM = ReactDOM.findDOMNode(this.refs.imgFigure0),

					
                    imgW = imgFigureDOM.scrollWidth,
                    imgH = imgFigureDOM.scrollHeight,
                    halfImgW = Math.ceil(imgW / 2),
                    halfImgH = Math.ceil(imgH / 2);

                //计算中心图片的位置
                /*一定要在样式里面设置图片资源的大小，否者出现节点渲染完毕图片为加载完的情况，导致获取节点大小出错*/
                 console.log(imgFigureDOM,imgFigureDOM.offsetHeight,document.getElementsByClassName("img-figure")[0].scrollHeight)
                console.log(stageDOM.scrollHeight,halfImgH)
                this.Constant.centerPos = {
                    left: halfStageW - halfImgW,
                    top: halfStageH - halfImgH
                };
                //计算左侧 右侧区域的图片百步位置的取值范围
                this.Constant.hPosRange.leftSecX[0] = -halfImgW;
                this.Constant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3;
                // console.log(this.Constant.hPosRange.leftSecX)

                this.Constant.hPosRange.rightSecX[0] = halfStageW = halfImgW;
                this.Constant.hPosRange.rightSecX[1] = stageW - halfImgW;
                this.Constant.hPosRange.y[0] = -halfImgH;
                this.Constant.hPosRange.y[1] = stageH - halfImgH;

                // console.log("this.Constant.hPosRange")
                // console.log(this.Constant.hPosRange)
                //计算上侧图片的取值范围
                this.Constant.vPosRange.topY[0] = -halfImgH;
                this.Constant.vPosRange.topY[1] = halfStageH - halfImgH * 3;
                this.Constant.vPosRange.x[0] = halfImgW - imgW;
                this.Constant.vPosRange.x[1] = halfImgW;

                // console.log("this.Constant.vPosRange")
                // console.log(this.Constant.vPosRange)

                this.rearrange(0);

            },
            render() {
                let controllerUnits = [];
                let imgFigures = [];
                let navControlls = [];
                //  console.log(this.state.imgsArrangeArr)
                imageDatas.forEach(function(value, index) {
                        //	console.log(this.state.imgsArrangeArr[index])
                        if (!this.state.imgsArrangeArr[index]) {
                            this.state.imgsArrangeArr[index] = {
                                pos: {
                                    left: 0,
                                    top: 0
                                },
                                rotate: 0,
                                isInverse: false,
                                isCenter: false
                            }
                        }
                        imgFigures.push( < ImgFigure key = { index }
                            data = { value }
                            ref = { 'imgFigure' + index }
                            arrange = { this.state.imgsArrangeArr[index] }
                            inverse = { this.inverse(index) }
                            center = { this.center(index) }

                            />)
                            navControlls.push( < NavControll key = { index }
                                arrange = { this.state.imgsArrangeArr[index] }
                                inverse = { this.inverse(index) }
                                index = { index }
                                center = { this.center(index).bind(this) }
                                />
                            )

                        }.bind(this));




                    return ( < section className = "stage"
                        ref = "stage" >
                        < section className = "img-sec" > { imgFigures } < /section> < nav className = "controller-nav" > { navControlls } < /nav >

                        < /section >

                    );
                }
            });

        AppComponent.defaultProps = {};

        export default AppComponent;
